<template>
  <a-row class="fault-effect">
    <a-col :span="4" style="height: 100%">
      <left-tree
        :treeData="treeData"
        @funSelectNode="SelectNode"
        :selectedKeys="selectedKeys"
        :expandedKeys="selectedKeys"
      ></left-tree>
    </a-col>
    <a-col :span="20" class="fault-table">
      <div class="fault-tabs">
        <p
          :class="[tabValue === item.id ? 'active' : '', 'tab-item']"
          v-for="item in menuList"
          :key="item.id"
          @click="changTabVal(item.id)"
        >
          <Icon-exclamation-circle v-if="item.id === 1" />
          <Icon-list v-if="item.id === 2" style="margin-right: 5px" />&nbsp;{{ item.name }}
        </p>
      </div>
      <div class="table-content">
        <div class="table-btn">
          <a-button type="primary" @click="openAffectAdd('', 0)"
            ><icon-plus :style="{ fontSize: '16px', marginRight: '2px' }" />新增</a-button
          >
          <a-button type="primary" v-if="tabValue === 2" @click="funDataSync"
            ><icon-sync :style="{ fontSize: '16px', marginRight: '2px' }" :spin="btnSpin" />数据同步</a-button
          >
        </div>
        <a-table class="fault-list" :data="list" :scroll="scroll" :bordered="false" :pagination="false">
          <template #columns>
            <a-table-column title="卫星名称" data-index="satelliteName"></a-table-column>
            <template v-if="+tabValue === 1">
              <a-table-column title="异常名称" data-index="exceptionName"></a-table-column>
              <a-table-column title="部件/分系统" data-index="components"></a-table-column>
            </template>
            <template v-else>
              <a-table-column title="异常时间" data-index="exceptionTime"></a-table-column>
              <a-table-column title="异常名称" data-index="exceptionName"></a-table-column>
              <a-table-column title="部件/分系统" data-index="components"></a-table-column>
              <a-table-column title="获取时间" data-index="synchronousTime"></a-table-column>
              <a-table-column
                title="持续时间(分钟)"
                data-index="persistenceTime"
                align="center"
                :width="130"
              ></a-table-column>
            </template>
            <a-table-column
              title="严重程度"
              data-index="seriousDegreeString"
              align="center"
              :width="90"
            ></a-table-column>
            <a-table-column title="影响" align="center" :width="80">
              <template #cell="{ record }">
                <a-button type="text" status="warning" @click="openAffectDetail(record)">点击</a-button>
              </template>
            </a-table-column>
            <a-table-column title="操作" align="center" :width="240">
              <template #cell="{ record }">
                <a-button type="text" @click="openAffectAdd(record, 1)">编辑</a-button>
                <a-button type="text" status="success" @click="openAffectAdd(record, 2)">详情</a-button>
                <a-button type="text" status="danger" @click="deleteListItem(record)">删除</a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <a-pagination
          class="fault-pagination"
          :total="total"
          :current="currentPage"
          :pageSize="pageSize"
          :page-size-options="[10, 20]"
          show-total
          show-jumper
          show-page-size
          @change="handleCurrentChange"
          @page-size-change="handleSizeChange"
        />
      </div>
    </a-col>
  </a-row>
  <Add :systemList="systemList" :getList="getList" ref="affectForm" />
  <Detail :systemList="systemList" ref="affetcDetail" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import Add from './add.vue'
import Detail from './detail.vue'
import { apiHome } from '@/api/home'
import { apiFault } from '@/api/fault'
import { IconExclamationCircle, IconList, IconPlus, IconSync } from '@arco-design/web-vue/es/icon'
import { Modal, Message } from '@arco-design/web-vue'
import LeftTree from '@/components/leftTree/index.vue'
const treeData = ref([])
const treeDefaultValue = ref([])
const tabValue = ref('1')
const selectedKeys = ref('')
const satelliteId = ref('') // 卫星id
const satelliteName = ref('') // 卫星name
const parentId = ref('')
const pageSize = ref(10)
const total = ref(0)
const currentPage = ref(1)
const affectForm = ref(null)
const affetcDetail = ref(null)
const systemList = ref([])
const btnSpin = ref(false)
const scroll = {
  y: 600
}
const menuList = reactive([
  {
    id: 1,
    name: '预想故障'
  },
  {
    id: 2,
    name: '历史故障'
  }
])
const list = ref([])
const SelectNode = (val, e) => {
  tabValue.value = 1
  pageSize.value = 10
  currentPage.value = 1
  satelliteId.value = e?.node?.id
  satelliteName.value = e?.node?.nodeName
  getList()
  getSystemList(val[0])
}
const openAffectAdd = (data, type) => {
  affectForm.value.openAffectForm(data?.id, type, tabValue.value, satelliteId.value, satelliteName.value)
}
const openAffectDetail = (data) => {
  affetcDetail.value.openDetailVisible(true, data.id, tabValue.value)
}
const getSystemList = (id) => {
  apiHome.getPortraitDetail(id).then((res) => {
    if (+res.code === 200) {
      systemList.value = res.data?.nodesArray
    } else {
      Message.error(res.message)
    }
  })
}
const changTabVal = (id) => {
  tabValue.value = id
  pageSize.value = 10
  currentPage.value = 1
  getList(id, satelliteId.value)
}
const deleteEnum = reactive({
  1: apiFault.deleteAnticipatoryFailure,
  2: apiFault.deleteHistoryFault
})
// 删除
const deleteListItem = (data) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前异常？',
    modalClass: 'tipModal',
    onOk: () => {
      deleteEnum[tabValue.value](data.id).then((res) => {
        if (+res.code === 200) {
          Message.success('删除成功')
          changTabVal(tabValue.value)
        } else {
          Message.error(res.message)
        }
      })
    }
  })
}
const getTreeData = () => {
  apiFault.getEquipNodeTree().then((res) => {
    if (res.code === 200) {
      treeDefaultValue.value = []
      treeData.value = res.data
      getDefaultTreeValue(treeData.value, treeDefaultValue.value)
      selectedKeys.value = treeDefaultValue.value.slice(-1)[0].id
      satelliteId.value = treeDefaultValue.value.slice(-1)[0].id
      satelliteName.value = treeDefaultValue.value.slice(-1)[0].nodeName
      parentId.value = res.data[0].id
      getList(tabValue.value, satelliteId.value)
      getSystemList(satelliteId.value)
    } else {
      Message.error(res.message)
    }
  })
}
const listEnum = {
  1: apiFault.getFailureList,
  2: apiFault.getHistoryList
}
const getList = () => {
  // todo
  /* const data = {
    parentId: satelliteId.value,
    size: pageSize.value,
    page: currentPage.value
  }
  listEnum[tabValue.value](data).then((res) => {
    if (+res.code === 200) {
      total.value = +res.data?.total
      list.value = res.data?.list
    } else {
      Message.error(res.message)
    }
  }) */
}
const getDefaultTreeValue = (treeData, data) => {
  const getId = (tree) => {
    tree.forEach((item, index) => {
      if (index === 0) {
        data.push(item)
        item.childList?.length > 0 && getId(item.childList)
      }
    })
  }
  getId(treeData)
  return data
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}
// 数据同步
const funDataSync = () => {
  btnSpin.value = true
  apiFault
    .getDataSync(satelliteId.value)
    .then((res) => {
      if (res.code === 200) {
        getList()
        window.setTimeout(() => {
          btnSpin.value = false
          Message.success(res.data)
        }, 1500)
      } else {
        window.setTimeout(() => {
          btnSpin.value = false
          Message.error(res.message)
        }, 1500)
      }
    })
    .catch(() => {
      btnSpin.value = false
    })
}
getTreeData()
</script>

<style lang="less" scoped>
.fault-effect {
  width: 100%;
  height: 100%;
  background: url('@/assets/image/chart-bg.png') no-repeat;
  background-size: 100% 100%;
  .fault-table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .fault-tabs {
      width: 100%;
      display: flex;
      margin: 15px 0 0;
      .tab-item {
        width: 200px;
        height: 45px;
        color: #01e4f8;
        font-size: 20px;
        line-height: 45px;
        text-align: center;
        margin: 0 0 0 10px;
        background: url('@/assets/image/score-button.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .active {
        background: url('@/assets/image/score-button-active.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .table-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 10px 10px 0;
      .table-btn {
        display: flex;
        align-items: center;
        justify-content: start;
        .arco-btn {
          margin: 10px 15px 0 0;
          background-color: #0077a9;
        }
      }
      .fault-list {
        margin-top: 20px;
        flex: 1;
        .arco-spin {
          height: 100%;
          .arco-table-border:not(.arco-table-border-cell) .arco-table-container {
            height: 100% !important;
            .arco-table .arco-table-element {
              height: 100% !important;
            }
          }
        }
      }
      .fault-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 5px 20px;
      }
    }
  }
}
</style>
